<template>
  <div>
    <div class="login_top clearfix">
      <a
        href="index.html"
        class="login_logo"
      ><img src="/static/images/logo02.png"></a>
    </div>

    <div
      class="login_form_bg"
      id='app'
    >
      <div class="login_form_wrap clearfix">
        <div class="login_banner fl"></div>
        <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
        <div class="login_form fr">
          <div class="login_title clearfix">
            <a
              href="javascript:;"
              class="cur"
            >账户登录</a>
          </div>
          <div class="form_con">
            <div class="form_input cur">
              <form id="login-form">
                <input
                  type="text"
                  v-model="username"
                  @blur="check_username"
                  name=""
                  class="name_input"
                  placeholder="请输入用户名或手机号"
                >
                <div
                  v-show="error_username"
                  class="user_error"
                  v-cloak
                >请填写用户名或手机号</div>
                <input
                  type="password"
                  v-model="password"
                  @blur="check_pwd"
                  name="pwd"
                  class="pass_input"
                  placeholder="请输入密码"
                >
                <div
                  v-show="error_pwd"
                  class="pwd_error"
                  v-cloak
                >{{ error_pwd_message }}</div>
                <div class="more_input clearfix">
                  <input
                    type="checkbox"
                    v-model="remember"
                  >
                  <label>记住登录</label>
                  <a href="/find_password.html">忘记密码</a>
                </div>
                <input
                  value="登 录"
                  class="input_submit"
                  @click="on_submit"
                >
              </form>
            </div>
          </div>
          <div class="third_party">
            <a
              @click="qq_login"
              class="qq_login"
            >微博</a>
            <a
              href="#"
              class="weixin_login"
            >微信</a>
            <a
              href="/register.html"
              class="register_btn"
            >立即注册</a>
          </div>

        </div>
      </div>
    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
export default {
  data() {
    return {
      host: host,
      error_username: false,
      error_pwd: false,
      error_pwd_message: '请填写密码',
      username: '',
      password: '',
      remember: true
    }
  },
  methods: {
    // 获取url路径参数
    get_query_string: function (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      }
      return null;
    },
    // 检查数据
    check_username: function () {
      if (!this.username) {
        this.error_username = true;
      } else {
        this.error_username = false;
      }
    },
    check_pwd: function () {
      if (!this.password) {
        this.error_pwd_message = '请填写密码';
        this.error_pwd = true;
      } else {
        this.error_pwd = false;
      }
    },
    // 表单提交
    on_submit: function () {
      this.check_username();
      this.check_pwd();

      if (this.error_username == false && this.error_pwd == false) {
        this.axios.post(this.host + '/login/', {
          username: this.username,
          password: this.password
        }, {
          responseType: 'json',
          // withCredentials: true
        }).then(response => {  // 2xx 响应码, 走then
          debugger
          
          localStorage.token = response.data.token;
          localStorage.user_id = response.data.id;
          localStorage.username = response.data.username;
          console.log(response.data)
          location.href = '/';
        }).catch(error => {  // 其他的都是catch
          if (error.response.status == 400) {
            this.error_pwd_message = '用户名或密码错误';
          } else {
            this.error_pwd_message = '服务器错误';
          }
          this.error_pwd = true;
        })
      }
    },
    // qq登录
    qq_login() {

      this.axios.post(this.host + '/weibo/', {
        responseType: 'json'
      })
        .then(response => {
          // response.data=>{'code': '0', 'msg': '成功', 'data': {'url': url}}
          location.href = response.data.data.url;  // 跳转
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
}
</script>

<style>
</style>